<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <van-cell title="商家积分" size="large" />
    <div class="points">
      <h4 style="font-size: 32px">{{ points }}</h4>
    </div>
    <van-cell-group title="充值兑换积分列表">
      <van-cell
        size="large"
        v-for="item in pointLists"
        :title="'充值 ' + item.money + ' 积分'"
        :key="item.id"
        is-link
        :to="{
          name: 'Recharge',
          params: { retailer_id: retailer_id, point: item.money },
        }"
      />
      <!-- <van-form @submit="onSubmit">
        <van-field
          v-model="point"
          name="point"
          type="digit"
          label="自定义充值"
          placeholder="输入充值积分"
          :rules="[{ required: true, message: '请填写充值积分' }]"
        >
          <template #button>
            <van-button size="mini" type="primary" native-type="submit"
              >去充值</van-button
            >
          </template>
        </van-field>
      </van-form> -->
    </van-cell-group>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import NavBar from "@/components/NavBar";
import { getWxRetailerById } from "@/api/member";
import { getRechargeList } from "@/api/wechat";

export default {
  name: "RetailerPoints",
  components: {
    NavBar,
  },
  // computed: {
  //   ...mapGetters(["retailer_name"]),
  // },
  props: ["retailer_id"],
  data() {
    return {
      title: this.$route.meta.title,
      points: 0,
      pointLists: [],
      ratio: 100,
      point: null,
    };
  },
  mounted() {
    this.getRetailerInfo();
    this.getPointsLists();
  },
  methods: {
    getRetailerInfo() {
      getWxRetailerById(this.retailer_id)
        .then((res) => {
          this.points = res.data.score;
          this.ratio = res.data.ratio;
        })
        .catch(() => {
          this.$toast("获取信息错误!");
        });
    },
    getPointsLists() {
      getRechargeList().then((res) => {
        this.pointLists = res.data;
      });
    },
    onSubmit(values) {
      console.log("submit", values);
      this.$router.push({
        name: "Recharge",
        params: { retailer_id: this.retailer_id, point: values["point"] },
      });
    },
  },
};
</script>

<style  scoped>
.title {
  text-align: center;
  margin: 0;
}
.points {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  background-color: #f2f3f5;
}
</style>